<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <label>
        姓：<input type="text" v-model="firstName">
        名：<input type="text" v-model="lastName"><br/>
        <!--computed计算函数在调用时只需要如 变量一样写名字即可，不需要携带()-->
        全名：<input type="text" v-model="fullName"><br/>
        全选:<input type="checkbox" v-model="allCheck">
        <span v-for="item in hobbyList">
            {{item.hobbyName}}:<input type="checkbox" name="hobbies"
                                      :value="item.hobbyName" :checked="item.flag">
        </span>
    </label>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    /*
        在Vue实例中，可以通过Vue选项设置Vue的内容，
        常用选项如下：
            el: 用于指定挂载视图的选项，这里的值需要使用字符串表示标签的选择器，
            如 '#app' 就是使用id选择器指定本页面中唯一的一个id为app的div标签
            data: 用于定义和维护Vue实例中需要使用到的数据模型，以及其对应的初始值，
            我们在视图中使用的所有数据变量都必须在data选项中进行定义，
            methods: 用于定义和维护Vue实例中需要使用到的 逻辑函数，在methods选项中
            定义的方法，能够操作Vue实例中定义的变量
            computed: 用于计算数据的选项，在该选项中定义的内容（类似于函数的定义）会监听
            计算数据所依赖 变量，如果变量值发生了变化，那么就会重新调用该方法进行计算内容，
            然后将结果返回；
            watched: 用于监测数据变化的选项，会实时监测你指定的属性变量，如果它发生了数据变化，
            那么就会执行你预先设定的方法逻辑，进行业务操作
            component: ....
            props: ....
    */
    new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: '',
            allCheck: false,
            hobbyList: [
                {
                    hobbyName: '篮球',
                    flag: false
                },
                {
                    hobbyName: '足球',
                    flag: false
                },
                {
                    hobbyName: '乒乓球',
                    flag: false
                },
                {
                    hobbyName: '羽毛球',
                    flag: false
                }
            ]
        },
        computed: {
            // computed完全体是包含setter和getter两个部分的；当前我们只编写了getter
            /*fullName() {
                // 当姓名都不为''空字符串或null时，执行如下操作
                if (this.firstName && this.lastName) {
                    return this.firstName.concat('-').concat(this.lastName);
                } else {
                    return '';
                }
            }*/
            // computed选项内的内容如果要使用完全体，那么需要设置为属性的写法
            fullName: {
                set(fullName) {
                    let infos = fullName.split(/^[-]$/);
                    this.firstName = infos[0];
                    this.lastName = infos[1];
                },
                get() {
                    if (this.firstName && this.lastName) {
                        return this.firstName.concat('-').concat(this.lastName);
                    } else {
                        return '';
                    }
                }
            }
        },
        watch: {
            allCheck: function (val) {
                // val值为true，那么将列表所有的值都改为true，否则都为false
                this.hobbyList.forEach(hobby => hobby.flag = val)
            }
        }
    })
</script>
</html>